<div class="fm-content">
  <div class="title">
    <i nz-icon [type]="'desktop'"></i> &nbsp;&nbsp;服务管理
  </div>
  <div class="work">
    <div class="top">
      <input nz-input placeholder="服务名称" class="fm-input first-input" [(ngModel)]="fs.queryObject['name:like']" />
      <nz-select [(ngModel)]="fs.queryObject['stype']" class="fm-input" (nzOpenChange)="dataSourceDic.load('0')"
        name="sstype" [nzPlaceHolder]="'服务类型'">
        <nz-option *ngFor="let option of dataSourceDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
        </nz-option>
        <nz-option *ngIf="dataSourceDic.isLoading" nzDisabled nzCustomContent>
          <i nz-icon type="loading" class="loading-icon"></i>加载中...
        </nz-option>
      </nz-select>
      <nz-button-group class="fm-search-input">
        <button nz-button nzType="primary" (click)="fs.loadData(true)">查询</button>
        <button nz-button (click)="fs.resetQueryObject() && fs.loadData(true)">重置</button>
      </nz-button-group>
      <div class="tool-right">
        <nz-button-group>

          <button nz-button [nzType]="'primary'" (click)="addService()">注册服务</button>
          <!-- <button nz-button (click)="fs.editRow()">编辑</button> -->
          <button nz-popconfirm nzTitle="确认删除选择项?" (nzOnConfirm)="fs.delEntitys()" nzPlacement="bottomRight"
            nz-button>删除</button>
        </nz-button-group>
      </div>
    </div>

    <div class="work-content">
      <div class="table">
        <nz-table nzSize="middle" nzShowSizeChanger [nzPageSizeOptions]='[ 10, 15, 20, 30, 40, 50 ]'
          [nzFrontPagination]="false" [nzData]="fs.datas" [nzLoading]="fs.isLoading || fs.isDeleing"
          [nzTotal]="fs.rowsCount" [(nzPageIndex)]="fs.pageIndex" [(nzPageSize)]="fs.pageSize"
          (nzPageIndexChange)="fs.loadData()" (nzPageSizeChange)="fs.loadData(true)">
          <thead (nzSortChange)="fs.sort($event)" nzSingleSort>
            <tr>
              <th nzWidth="60px" nzShowCheckbox [(nzChecked)]="fs.allChecked" [nzIndeterminate]="fs.indeterminate"
                (nzCheckedChange)="fs.checkAll($event)"></th>
              <th nzWidth="25%">服务名称</th>
              <th>数据源/时间</th>
              <th nzWidth="30%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of fs.datas">
              <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="fs.refreshCheckStatus()">
              </td>
              <td (click)="fs.editRow(data)" class="form-edit">{{data.name}}<br/>{{data.type}}<br/>{{data.serverTypeName}}</td>
              <td>{{data.metedataName}}<br/>{{data.registertime  | date:'yyyy年MM月dd日'}}</td>
              <td
                *ngIf="data.serverType === '111' || data.serverType === '222' || data.serverType === '333' ;else other">
                <ng-container *ngIf="data.curLevel == null || data.curLevel == -1  ;else other">
                  <a *ngIf="(data.curLevel == null || data.curLevel == '') && !data.spend" (click)="publish(data)" class="form-button">发布服务</a>
                  <span *ngIf="data.curLevel == -1 && data.spend">发布完成({{data.spend}})</span>
                  <a *ngIf="data.curLevel == -1 && data.spend" class="form-button" (click)="publish(data)">重新发布</a>
                </ng-container>
                <ng-template #other>
                  <a class="form-button"> {{data.curLevel}}---{{data.curSchedule}}/{{data.allSchedule}}</a>
                </ng-template>
              </td>
              <ng-template #other>
                <td>
                  <a></a>
                </td>
              </ng-template>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>


    <nz-modal nzWidth='830' nzTitle="编辑" [nzMaskClosable]='false' [nzFooter]="null" [(nzVisible)]="fs.isEditVisible"
      (nzOnCancel)="fs.closeEdit()">
      <form nz-form [nzLayout]="'inline'">

        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="24">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">缩略图</nz-form-label>
              <nz-form-control class="form-control3">
                <nz-upload style="width: 70%;" nzAction="{{ ffs.getUploadUrl() }}" nzListType="picture-card"
                  [(nzFileList)]="fs.er.thumbnail" [nzAccept]="'.png,.jpg,.gif,.svg'"
                  [nzShowButton]="fs.er.thumbnail ? fs.er.thumbnail.length < 1 : true" [nzShowUploadList]="{ showPreviewIcon: true,
                                    showRemoveIcon: true,
                                    hidePreviewIconInNonImage: true }" (nzChange)="ffs.handleChange($event)"
                  [nzPreview]="ffs.handlePreview">
                  <i nz-icon type="plus"></i>
                  <div class="ant-upload-text">上传</div>
                </nz-upload>
                <nz-modal [nzVisible]="ffs.previewVisible" [nzContent]="modalContent" [nzFooter]="null"
                  (nzOnCancel)="ffs.previewVisible = false">
                  <ng-template #modalContent>
                    <img [src]="ffs.previewImage" [ngStyle]="{ width: '100%' }" />
                  </ng-template>
                </nz-modal>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>

        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">服务名称</nz-form-label>
              <nz-form-control class="form-control" [nzValidateStatus]="name.invalid?'error':'success'" nzHasFeedback>
                <input nz-input required [(ngModel)]="fs.er.name" id="name" name="name" #name="ngModel">
              </nz-form-control>
            </nz-form-item>
          </div>

          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">服务标识</nz-form-label>
              <nz-form-control class="form-control" [nzValidateStatus]="cname.invalid?'error':'success'" nzHasFeedback>
                <input nz-input required [(ngModel)]="fs.er.cname" name="cname" id="cname" #cname="ngModel">
              </nz-form-control>
            </nz-form-item>
          </div>

        </div>

        <div nz-row [nzGutter]="24">

          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">服务性质</nz-form-label>
              <nz-form-control class="form-control">
                <nz-select [(ngModel)]="fs.er.serverType" name="serverType" required #serverType="ngModel"
                  (nzOpenChange)="dataSourceDic.load('0')" (nzModelChange)="change()" [nzPlaceHolder]="'请选择'">
                  <nz-option *ngFor="let option of dataServeDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="dataSourceDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                  <span *ngIf="!dataSourceDic.isLoaded">
                    <nz-option [nzLabel]="fs.er.serverTypeName" [nzValue]="fs.er.serverType">
                    </nz-option>
                  </span>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>

          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">服务类型</nz-form-label>
              <nz-form-control class="form-control" [nzValidateStatus]="stype.invalid?'error':'success'" nzHasFeedback>
                <nz-select [(ngModel)]="fs.er.type" name="stype" required #stype="ngModel"
                  (nzOpenChange)="dataSourceDic.load('0')" [nzPlaceHolder]="'请选择'">
                  <nz-option *ngFor="let option of dataSourceDic.datas" [nzLabel]="option.display"
                    [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="dataSourceDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                  <span *ngIf="!dataSourceDic.isLoaded">
                    <nz-option [nzLabel]="fs.er.typeName" [nzValue]="fs.er.type">
                    </nz-option>
                  </span>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>


        </div>

        <div nz-row [nzGutter]="24">

          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">服务权限</nz-form-label>
              <nz-form-control class="form-control" [nzValidateStatus]="permission.invalid?'error':'success'"
                nzHasFeedback>
                <nz-select [(ngModel)]="fs.er.permission" name="permission" required #permission="ngModel"
                  (nzOpenChange)="servicePermission.load('0')" [nzPlaceHolder]="'请选择'">
                  <nz-option *ngFor="let option of servicePermission.datas" [nzLabel]="option.display"
                    [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="servicePermission.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                  <span *ngIf="!servicePermission.isLoaded">
                    <nz-option [nzLabel]="fs.er.permission" [nzValue]="fs.er.permission">
                    </nz-option>
                  </span>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>


          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">服务状态</nz-form-label>
              <nz-form-control class="form-control" [nzValidateStatus]="state.invalid?'error':'success'" nzHasFeedback>
                <nz-select [(ngModel)]="fs.er.state" name="state" required #state="ngModel"
                  (nzOpenChange)="stateDic.load('0')" [nzPlaceHolder]="'请选择'">
                  <nz-option *ngFor="let option of stateDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="stateDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                  <span *ngIf="!stateDic.isLoaded">
                    <nz-option [nzLabel]="fs.er.state" [nzValue]="fs.er.state">
                    </nz-option>
                  </span>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>

        </div>

        <div nz-row [nzGutter]="24">


          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">坐标系统</nz-form-label>
              <nz-form-control class="form-control" [nzValidateStatus]="src.invalid?'error':'success'" nzHasFeedback>
                <nz-select [(ngModel)]="fs.er.src" name="src" required #src="ngModel"
                  (nzOpenChange)="coordinateSystem.load('0')" [nzPlaceHolder]="'请选择'">
                  <nz-option *ngFor="let option of coordinateSystem.datas" [nzLabel]="option.display"
                    [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="coordinateSystem.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                  <span *ngIf="!coordinateSystem.isLoaded">
                    <nz-option [nzLabel]="fs.er.src" [nzValue]="fs.er.src">
                    </nz-option>
                  </span>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>


          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">资源目录</nz-form-label>
              <nz-form-control class="form-control" [nzValidateStatus]="content.invalid?'error':'success'"
                nzHasFeedback>
                <nz-tree-select nzPlaceHolder="请选择" [nzDropdownMatchSelectWidth]="true" required #content="ngModel"
                  [nzDropdownStyle]="{ 'max-height': '300px' }" [(ngModel)]="fs.er.content" name="content"
                  [nzAsyncData]="true" [nzNodes]="sourceMenu.treeDatas">
                </nz-tree-select>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>

        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label class="form-label">数据源</nz-form-label>
              <nz-form-control class="form-control">
                <nz-select [(ngModel)]="fs.er.metedata" name="metedata" [nzPlaceHolder]="'请选择'">
                  <nz-option *ngFor="let option of defDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
                  </nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label class="form-label">年份</nz-form-label>
              <nz-form-control class="form-control" [nzValidateStatus]="year.invalid?'error':'success'" nzHasFeedback>
                <nz-select [(ngModel)]="fs.er.year" name="year" #year="ngModel" (nzOpenChange)="yearDic.load('0')"
                  [nzPlaceHolder]="'请选择'">
                  <nz-option *ngFor="let option of yearDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
                  </nz-option>
                  <nz-option *ngIf="yearDic.isLoading" nzDisabled nzCustomContent>
                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                  </nz-option>
                  <span *ngIf="!yearDic.isLoaded">
                    <nz-option [nzLabel]="fs.er.year" [nzValue]="fs.er.year">
                    </nz-option>
                  </span>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="24">
            <nz-form-item>
              <nz-form-label class="form-label">url</nz-form-label>
              <nz-form-control class="form-control3" [nzValidateStatus]="original.invalid?'error':'success'"
                nzHasFeedback>
                <input nz-input [(ngModel)]="fs.er.original" name="original" id="original" #original="ngModel">
                <!-- <textarea nz-input [(ngModel)]="fs.er.original" name="original" #original="ngModel"
                  [nzAutosize]="{ minRows: 2, maxRows: 3 }"></textarea> -->
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label class="form-label">排序</nz-form-label>
              <nz-form-control nzHasFeedback>
                <nz-input-number class="form-control" name="order" [(ngModel)]="fs.er.order" [nzMin]="1" [nzMax]="10000"
                  [nzStep]="1">
                </nz-input-number>
              </nz-form-control>
            </nz-form-item>
          </div>

          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label class="form-label">是否启用</nz-form-label>
              <nz-form-control class="form-control">
                <label nz-checkbox [(ngModel)]="fs.er.enable" name="enable">启用</label>
              </nz-form-control>
            </nz-form-item>
          </div>

        </div>

        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="24">
            <nz-form-item>
              <nz-form-label class="form-label">说明</nz-form-label>
              <nz-form-control class="form-control3" nzHasFeedback>
                <textarea [nzAutosize]="{ minRows: 1, maxRows: 3 }" name="info" nz-input
                  [(ngModel)]="fs.er.info"></textarea>
              </nz-form-control>
            </nz-form-item>
          </div>

        </div>
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">注册者</nz-form-label>
              <nz-form-control class="form-control" nzHasFeedback
                [nzValidateStatus]="registrantname.invalid?'error':'success'">
                <input nz-input required [(ngModel)]="fs.er.registrantname" name="registrantname" disabled
                  #registrantname="ngModel">
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label nzRequired class="form-label">注册时间</nz-form-label>
              <nz-form-control class="form-control" nzHasFeedback
                [nzValidateStatus]="registertime.invalid?'error':'success'">
                <nz-date-picker required nzShowTime [(ngModel)]="fs.er.registertime" name="registertime" disabled
                  #registertime="ngModel"></nz-date-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>

        <div class="bpm-tabs" [hidden]="fs.er.serverType != '111'">
          <div class="bpm-tabs-sub">
            <div class="bpm-tabs-sub-ioc"></div>
            <div class="bpm-tabs-sub-h2">切片方案
              <span class="form-edit" (click)="fs.addLocalRow(fs.er, 'serviceSchemes', ['id'])">
                <添加>
              </span>
            </div>
          </div>
        </div>

        <nz-table [nzData]="[{}]" [nzShowPagination]='false' [hidden]="fs.er.serverType != '111'">
          <thead>
            <tr>
              <th class="form-input">级别</th>
              <th class="form-input">数据源</th>
              <th class=" form-input">简化等级</th>
              <th class=" form-input">排序</th>
              <th class=" form-input">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let c of fs.er.serviceSchemes">
              <td>
                <nz-input-number [(ngModel)]="c.level" [nzStep]="1" [nzMin]="1" [nzMax]="30"
                  [ngModelOptions]="{standalone: true}"></nz-input-number>
              </td>
              <td>
                <nz-form-control class="form-control">
                  <nz-select class="form-control" [ngModelOptions]="{standalone: true}" [(ngModel)]="c.source"
                    [nzPlaceHolder]="'请选择'">
                    <nz-option *ngFor="let option of defDic.datas" [nzLabel]="option.display" [nzValue]="option.id">
                    </nz-option>
                  </nz-select>
                </nz-form-control>
              </td>
              <td>
                <nz-input-number [(ngModel)]="c.simpleRank" [nzStep]="1" [nzMin]="0" [nzMax]="20"
                  [ngModelOptions]="{standalone: true}"></nz-input-number>
              </td>
              <td>
                <nz-input-number [(ngModel)]="c.order" [nzStep]="1" [ngModelOptions]="{standalone: true}">
                </nz-input-number>
              </td>
              <td>
                <span class="form-edit" nz-popconfirm nzTitle="确认删除选择项?"
                  (nzOnConfirm)="fs.delLocalRow(fs.er.serviceSchemes, c)" nzPlacement="bottomRight">删除</span>
              </td>
            </tr>
          </tbody>
        </nz-table>
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="24" class="form-button-align">
            <button nz-button nzType="default" (click)="fs.closeEdit()" class="form-button">取消</button>
            <button nz-button nzType="primary" [disabled]='name.invalid || cname.invalid ||  original.invalid  || registrantname.invalid || registertime.invalid  
              || src.invalid || content.invalid || permission.invalid
              || state.invalid || stype.invalid || serverType.invalid' (click)="fs.save()"
              [nzLoading]="fs.isSaveing">保存</button>
          </div>
        </div>
      </form>
    </nz-modal>
  </div>
</div>
